<template>
  <div>
    <Top name1='商品管理' name2="分类参数"></Top>
    <el-card style="width:1400px" class="box-card">
      <el-alert
        style="height:30px"
        :closable="false"
        title="注意:只允许为第三级分类设置相关参数 ! !"
        type="warning"
        show-icon>
      </el-alert>
      <!-- 选框 -->
      <span class="demonstration" style="margin:10px;font-size: 12px;">选择商品分类：</span>
      <el-cascader
        v-model="value"
        ref="addTree"
        :options="CateDate"
        :clearable="true"
        :props="{ label: 'cat_name',expandTrigger: 'hover',value:'cat_id'}"
        @change="handleChange"
      ></el-cascader><br>
      <!-- 表格 -->
      <template>
        <el-tabs v-model="activeName"  @tab-click="qiehuan">
          <el-tab-pane label="动态参数" :disabled="take" style="padding:0" name="many">
          <el-button class="addbtn" type="primary" :disabled="take" @click="addisplay=true">添加参数</el-button>
            <template>
              <el-form>
              <el-table v-if="tableData!=[]"
                :data="tableData"
                :border="true"
                style="padding: 0;">
                <el-table-column type="expand"  width="70px">
                  <template slot-scope="scoped">
                    <el-form-item  style="margin-left: 20px;padding: 10px;">
                      <span>
                        <el-tag closable="" @close="delvals(scoped.row,ind)" v-for="(item,ind) in scoped.row.attr_vals" :key="ind">
                          {{ item }}
                        </el-tag>
                        <el-input
                          class="input-new-tag"
                          v-if="inputVisible"
                          v-model="inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm(scoped.row)"
                          @blur="handleInputConfirm(scoped.row)"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scoped.row)">+ New Tag</el-button>
                      </span>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="#"
                  type="index"
                  width="80px"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="参数名称"
                  align="center"
                  prop="attr_name">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="操作">
                  <template slot-scope="scoped">
                    <el-tooltip class="item" effect="light" content="删除参数" placement="top">
                      <el-button class="sm" type="danger"  @click="delParams(scoped.row.attr_id)" icon="el-icon-delete">删除</el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            </template>
          </el-tab-pane>
          <el-tab-pane label="静态参数" :disabled="take" name="only">
          <el-button class="addbtn" :disabled="take" type="primary" @click="addisplay=true">添加参数</el-button>
          <template>
              <el-form>
              <el-table v-if="tableData!=[]"
                :data="tableData"
                :border="true"
                style="padding: 0;">
                <el-table-column type="expand"  width="70px">
                  <template slot-scope="scoped">
                    <el-form-item  style="margin-left: 20px;padding: 10px;">
                      <span>
                        <el-tag closable @close="delvals(scoped.row,ind)" v-for="(item,ind) in scoped.row.attr_vals" :key="ind">
                          {{ item }}
                        </el-tag>
                        <el-input
                          class="input-new-tag"
                          v-if="inputVisible"
                          v-model="inputValue"
                          ref="saveTagInput"
                          size="small"
                          @keyup.enter.native="handleInputConfirm(scoped.row)"
                          @blur="handleInputConfirm(scoped.row)"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scoped.row)">+ New Tag</el-button>
                      </span>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="#"
                  type="index"
                  width="80px"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="参数名称"
                  align="center"
                  width="600"
                  prop="attr_name">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="操作">
                  <template slot-scope="scoped">
                    <el-tooltip class="item" effect="light" content="删除参数" placement="top">
                      <el-button class="sm" type="danger" icon="el-icon-delete" @click="delParams(scoped.row.attr_id)">删除</el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            </template>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-card>
    <!-- 添加参数 -->
    <el-dialog
      :title="'添加'+getaddFormName"
      :visible.sync="addisplay"
      width="500px"

      >
      <el-form  :model="addForm" ref="addForm" label-width="100px" class="demo-dynamic">
        <!-- 参数名字 -->
        <el-form-item
          style="padding:0"
          prop="attr_name"
          label="参数名称"
          :rules="[
            { required: true, message: '请输入角色名称', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="addForm.attr_name"></el-input>
        </el-form-item>
        <!-- 角色描述 -->
        <el-form-item
          style="padding:0;"
          prop="attr_vals"
          label="参数描述"
          :rules="[
            { required: true, message: '请输入角色描述', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="addForm.attr_vals"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addisplay = false">取 消</el-button>
        <el-button type="primary" @click="addParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Top from '../../components/top.vue'
import {getGoodsAjax} from '../../api/categories'
import {getParams,addParams,addParamsVals,delParams} from '../../api/CateAttr'
  export default {
    components: {
      Top
    },
    data () {
      return {
        CateDate:[],
        value:[],
        activeName:'many',
        tableData:[],
        take:true,
        cat_id:0,
        addisplay:false,
        addForm: {
          domains: [{
            value: ''
          }],
          attr_name:'',
          attr_vals:'',
        },
        inputVisible: false,
        inputValue: ''
      };
    },
    async created() {
      const res = await getGoodsAjax()
      if(res.data.meta.status!=200){
        return this.$message.error("获取分类列表失败")
      }
      this.CateDate = res.data.data
    },
    mounted() {
    },
    methods: {
      async getdata(){
        const res =  await getParams({
          id: this.cat_id,
          sel:this.activeName
        })
        if(res.data.meta.status!=200){
          return this.$message.error("获取参数失败")
        }
        res.data.data.forEach(el => {
          el.attr_vals = el.attr_vals ? el.attr_vals.split(',') : el.attr_vals;
        });
        this.tableData = res.data.data
      },
      // 选择商品类型时的监听
      handleChange(value){
        // 选择请求 取消选中不请求
        if(value.length!==0){
          this.take = false
          this.cat_id = value[value.length-1]
          this.getdata()
      // 不选商品类型时禁用表格
        }else if(value.length==0){
          this.take = true
        }
        
      },
      // 动态静态切换
      qiehuan(){
        this.getdata()
      },
      // 添加参数 参数详情
      addParams(){
        this.$refs.addForm.validate(async(validate)=>{
          console.log(validate);
          if(!validate){
            this.addisplay=false
            return this.$message.error("添加参数有误！")
          }
          const res = await addParams(
            {
                method:'post',
                url:"/categories/"+this.cat_id+'/attributes',
                params:{
                  attr_name:this.addForm.attr_name,
                  attr_sel:this.activeName,
                  attr_vals:this.addForm.attr_vals
                },
                headtype:'form'
            }
          )
          console.log(res);
          if(res.data.meta.status !== 201){
            this.addisplay=false
            this.$refs.addForm.resetFields()
            return this.$message.error("添加参数失败")
          }
          this.getdata()
          this.addisplay=false
          this.$refs.addForm.resetFields()
          return this.$message.success("添加参数成功")
        })
      },
      // 删除
      async delParams(id){
        const res = await delParams("categories/"+this.cat_id+"/attributes/"+id)
        if (res.data.meta.status!==200) {
          return this.$message.error("删除失败")
        }
        this.getdata()
        return this.$message.success("删除成功")
      },
      // 点击添加参数属性 输入框显示
      showInput(row) {
        console.log(row);
        row.inputValue = ""
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      // 参数属性值修改请求封装函数
      async resetParams(row){
        const res = await addParamsVals({
              method:'put',
              url:"/categories/"+this.cat_id+'/attributes/'+row.attr_id,
              params:{
                attr_name:row.attr_name,
                attr_sel:this.activeName,
                attr_vals:row.attr_vals.join(',')
              },
              headtype:'form'
            })
            if(res.data.meta.status!==200){
              return this.$message.error("更新参数属性失败")
            }
            this.inputVisible = false;
            this.inputValue = '';
            return this.$message.success("更新参数属性成功")
      } 
      ,
      // 添加参数属性值
      async handleInputConfirm(row) {
        let inputValue = this.inputValue;
          if (inputValue) {
            row.attr_vals.push(inputValue);
            this.resetParams(row)
          }
          this.inputVisible = false;
      },
      // 删除参数属性值
      delvals(row,ind){
        row.attr_vals.splice(ind,1)
        this.resetParams(row)
      },
    },
    computed:{
      // 切换参数类型 添加参数对话框的提示
      getaddFormName(){
        return this.activeName == "many" ? "动态参数" : "静态参数"
      }
    }
  }
</script>
<style lang='scss' scoped> 
div{
  padding: 20px;
  .sm{
    padding: 8px;
    font-size: 12px;
  }
  .addbtn{
    padding: 8px;
    font-size: 12px;
    margin-bottom: 20px;
  }
  .el-tag{
    margin:10px;
  }
}
</style>